<template>

  <el-dialog
    top="20px"
    title="地图"
    :lock-scroll="tableConfig.lockScroll"
    :append-to-body="tableConfig.appendToBody"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1300px">


    <el-row>
      <el-col :span="16">
        <!--地图-->
        <div id="gaoDeMap" class="map"></div>

      </el-col>

      <el-col :span="8">

        <el-form >

          <el-row :gutter="20">
            <el-col :span="14">
              <el-input v-model="search" placeholder="输入要查询的地点" ></el-input>
            </el-col>
            <el-col :span="10">
              <el-button type="primary" @click="searchMap">搜索</el-button>
            </el-col>
          </el-row>
          <!--搜索后展示的位置-->
          <div id="panel" />

          <el-form-item label="经度">
            <el-input v-model="lng" placeholder="点击地图或输入经度" @change="lnglatChange"></el-input>
          </el-form-item>

          <el-form-item label="纬度">
            <el-input v-model="lat" placeholder="点击地图或输入纬度" @change="lnglatChange"></el-input>
          </el-form-item>

          <el-form-item label="经纬度对应地址">
            <el-input v-model="actualAddress" ></el-input>
          </el-form-item>

          <span >
            <el-button plain type="warning" @click="saveMap" >保存</el-button>
            <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
          </span>
        </el-form>



      </el-col>
    </el-row>





  </el-dialog>

</template>

<script>

  import AMapLoader from '@amap/amap-jsapi-loader'
  window._AMapSecurityConfig  = {
    securityJsCode:'0329a2f5525dd212eb6e341b9e49700a',
  };

  export default {
    // 高德坐标选择组件
    name: "GaoDeMapSelectCoordinates",
    data(){
      return {
        // 初始化后的地图
        map: null,
        // 地图点标记
        marker: null,
        // 回调函数名
        callback: null,
        // 要查询的值
        search: null,
        // 查询组件初始化
        placeSearch: null,
        // 经度
        lng: null,
        // 纬度
        lat: null,
        // 初始化后的坐标转地址对象
        geocoder: null,
        // 实际地址，坐标转经纬度后的地址
        actualAddress: null,
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
          // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
          lockScroll: false,
          appendToBody: true,
        },
        // 开发者配置
        mapDep: {
          // 申请好的Web端开发者Key，首次调用 load 时必填
          key: "314d8b46e066ba9fc875fbb6fec9342f",
        },
        // 地图配置
        mapConfig: {
          // 经度-默认进入地图的经纬度位置
          longitude: 116.240187,
          // 纬度
          latitude: 39.909442,
          // 展示模式,是否为3D地图模式
          viewMode: "2D",
          // 初始化地图级别
          zoom: 5,
        },
      }
    },
    methods: {
      /**
       * 初始化地图
       */
      initMap(){
        let that = this
        AMapLoader.load({
          // 申请好的Web端开发者Key，首次调用 load 时必填
          key: this.mapDep.key,
          // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          version: "2.0",
          // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          plugins: [
            "AMap.Scale",
            "AMap.ToolBar",
            "AMap.AutoComplete",
            "AMap.PlaceSearch",
            "AMap.ControlBar",
            // 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换
            "AMap.Geocoder",
            "AMap.MouseTool",
            "AMap.MapType",
            "AMap.HawkEye"]
        }).then((AMap) => {
          // 1、初始化地图
          this.map = new AMap.Map('gaoDeMap',{
            // 是否为3D地图模式
            viewMode : this.mapConfig.viewMode,
            // 初始化地图级别
            zoom : this.mapConfig.zoom,
            //中心点坐标
            center : [this.mapConfig.longitude, this.mapConfig.latitude],
            // 调整大小启用
            resizeEnable: true
          });

          // 设置鼠标的样式
          this.map.setDefaultCursor("pointer");

          // 设置坐标转中文
          this.geocoder = new AMap.Geocoder({
            city: "全国",
            radius: 1000,
            extensions: "all",
          });

          // 3、添加放大缩小地图、转盘
          // // 添加左下角的比例尺
          this.map.addControl(new AMap.Scale());
          let toolBar = new AMap.ToolBar({
            position: {
              bottom: '210px',
              right: '35px'
            }
          });
          // 添加右下角的放大缩小
          this.map.addControl(toolBar);
          // let controlBar = new AMap.ControlBar({
          //   position: {
          //     bottom: '280px',
          //     right: '10px',
          //   },
          // });
          // 方向盘
          // this.map.addControl(controlBar);

          // 添加右上角的标准图和卫星图  和路况
          this.map.addControl(new AMap.MapType());
          // 添加地图放大镜
          // this.map.addControl(new AMap.HawkEye());

          /// 4、鼠标点击获取经纬度
          this.map.on('click', function(e) {
            that.lng = e.lnglat.getLng()
            that.lat = e.lnglat.getLat()
            // 添加标记点
            that.addDot()
          });

        }).catch(e => {
          console.error("地图加载出现问题", e)
        })
      },
      /**
       * 查询关键字
       */
      searchMap(){
        this.placeSearch = new AMap.PlaceSearch({
          // 构造地点查询类
          pageSize: 5, // 单页显示结果条数
          pageIndex: 1, // 页码
          citylimit: true, // 是否强制限制在设置的城市内搜索
          map: this.map, // 展现结果的地图实例
          panel: "panel", // 结果列表将在此容器中进行展示。
          autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        // 关键字查询
        this.placeSearch.search(this.search, (status, result) => {
          // 查询成功时，result即对应匹配的POI信息
          // console.log(status, result);
        });
        // 监听选中节点事件
        // 原来的事件监听 AMap.event.addListener 已经不存在了
        AMap.Event.addListener(this.placeSearch, "selectChanged", (SelectChangeEvent) => {
          // 获取节点信息自行处理逻辑代码
          let data = SelectChangeEvent.selected.data;
        });
      },
      /**
       * 经纬度变化触发的事件
       */
      lnglatChange(){
        this.addDot()
        //自适应中心点
        this.map.setFitView();
      },
      /**
       * 增加点标记
       */
      addDot(){
        if (this.marker) {
          // 先置空
          this.marker.setMap(null);
          this.marker = null;
        }
        // 构建一个标记点
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(this.lng, this.lat)
        });
        // 将创建的点标记添加到已有的地图实例
        this.map.add(this.marker);

        // 坐标转地址
        this.getLngLatService()
      },
      /**
       * 将坐标转换为中文地址
       */
      getLngLatService(){
        let coordinate = [Number(this.lng), Number(this.lat)]
        let that = this
        this.geocoder.getAddress(coordinate, function(status, result){
          if (status === 'complete' && result.info === 'OK') {
            that.actualAddress = result.regeocode.formattedAddress
          } else {
            console.log('根据经纬度查询地址失败')
          }
        })
      },
      /**
       * 打开当前页面
       * @param jd 经度
       * @param wd 纬度
       * @param callback 回调函数名
       */
      openGaoDePage(jd, wd, callback){
        this.tableConfig.show = true
        // 获取密钥
        // 初始化地图
        this.initMap();
        if (jd && wd){
          this.lng = jd
          this.lat = wd
        }
        this.callback = callback
      },
      /**
       * 清理旧数据
       */
      init(){
        this.lng = null
        this.lat = null
        this.actualAddress = null
        this.search = null
      },
      /**
       * 保存地图
       */
      saveMap(){
        let obj = {
          // 经度
          lng: this.lng,
          // 纬度
          lat: this.lat,
          // 实际地址，坐标转经纬度后的地址
          actualAddress: this.actualAddress,
        }
        this.$emit(this.callback, obj)
        this.tableConfig.show = false
      }
    }
  }
</script>

<style scoped>

  .map {
    width: 800px;
    height: 600px;
    border-radius:6px;
  }

</style>
